<template>
    <div class="container">
        <div class="wrap-container" :style="{'height': wrapHeight + 'px'}">
            <div @click="expandInner" class="button" :class="[clicked?'expend':'']" :style="{'height': clicked?radius*2:0 + 'px','width': clicked?radius*2:0 + 'px','border-top-left-radius':radius + 'px','border-top-right-radius':radius + 'px','border-bottom-right-radius':radius + 'px','border-bottom-left-radius':radius + 'px'}" >
                <div class="inner-button" :class="[innerclicked?'expendinner':'']" :style="{'height': innerclicked?radius*2:0 + 'px','width': innerclicked?radius*2:0 + 'px','border-top-left-radius':radius + 'px','border-top-right-radius':radius + 'px','border-bottom-right-radius':radius + 'px','border-bottom-left-radius':radius + 'px'}"  ></div>
                <!-- <input type="text" v-if="clicked" class="input" placeholder="请输入可以吗" :class="[clicked?'show':'']" > -->
            </div>
            <div @click="expandedClick" v-if="!clicked" class="sign" :class="[clicked?'hidden':'']" :style="{'color': clicked?'#000000':'#0000ff'}">
              <text class="sign-in">SIGN IN</text>
            </div>
        </div>
    </div>
</template>
<style scoped>
.wrap-container {
  width: 750px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.button {
  width: 0;
  height: 0;
  /* bottom: 0; */
  background-color: black;
  align-items: center;
  justify-content: center;

  transition-property: width, height, backgroundColor;
  transition-duration: 1000;
  transition-delay: 0s;
  transition-timing-function: ease;
}

.inner-button {
  transition-property: width, height, backgroundColor;
  transition-duration: 1000;
  transition-delay: 0s;
  transition-timing-function: ease;
}

.expendinner {
  background-color: brown;
}

.sign {
    width: 200px;
    height: 100px;
    position: absolute;
    left: 375px;
    margin-left: -100px;
    opacity: 1;
    background-color: black;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    /* transition-property: opacity;
    transition-duration: 300;
    transition-delay: 0;
    transition-timing-function: ease-in-out; */
}

.sign-in {
  color: aliceblue;
}

.hidden {
    opacity: 0;
}
.input{
    width: 600px;
    height: 100px;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1000;
    transition-delay: 0;
    transition-timing-function: ease-in-out;
}

.show{
    opacity: 1;
}

.expend {
  /* bottom:100px; */
  /* width: 1500px; */
  /* height: 300px; */
  background-color: aqua;
}
</style>
<script>
import { heatmapChartInfo } from "./config";
import { Utils } from "weex-ui";
export default {
  data() {
    return {
      clicked: false,
      innerclicked:false,
      wrapHeight: 1334,
      heatmapChartInfo: heatmapChartInfo,
      radius: 0,
      switch: false
    };
  },
  methods: {
    expandedClick() {
      if (this.clicked) {
        this.clicked = false;
      } else {
        this.clicked = true;
      }
    },
    expandInner() {
      if (this.switch) {
        this.clicked = false;
        this.switch = false;
      }else {
        if (this.innerclicked) {
          this.innerclicked = false;
          this.switch = true;
        } else {
          this.innerclicked = true;
        }
      }
    }
  },
  created() {
    this.wrapHeight = Utils.env.getPageHeight();
    this.radius = Math.sqrt(this.wrapHeight*this.wrapHeight + 375*375);
    this.$navigator.setLeftItem(
      {
        text: "返回", // 展示的文字 (和图片 二选一)
        textColor: "", // 文字颜色 (默认为白色)
        fontSize: "32", // 字号（默认32px）
        fontWeight: "normal", // 是否加粗（默认不加粗）
        image: "" // 展示的图片url (和文字 二选一，文字优先级更高)
      },
      () => {
        // 点击回调
        this.$router.back({
          type: "PUSH"
        });
      }
    );
  }
};
</script>
